<template>
	<view class="store-page">
		<view class="header" :style="{ paddingTop: heightConfig.navBarPaddingTop + 'px' }">
			<!-- <view class="logo">
        <image
          style="
            width: 60rpx;
            height: 60rpx;
            margin-right: 20rpx;
            border-radius: 50%;
          "
          src="/static/images/logo.jpg"
          mode="scaleToFill"
        />
      </view> -->
		</view>
		<view class="content" v-if="classifyList.length > 0">
			<scroll-view scroll-y class="nav-menu">
				<view v-for="(item, index) in classifyList" :key="index" class="menu-item" :style="{
            borderLeft: index == currentItem ? '4rpx solid red' : 'none',
            background: index == currentItem ? '#fff' : '#f0f0f0',
			color:index == currentItem ? 'red' : '#666', 
          }" @click="clickMenu(index)">{{ item.deptName }}</view>
			</scroll-view>
			<scroll-view scroll-y class="nav-content">
				<view class="menu-name" @click="toProductList">
					<text>{{ classifyList[currentItem].deptName }}</text>
					<image class="arrow" src="/static/images/my/9.png"></image>
				</view>
				<view class="content-item" @click="toProductList">
					<image class="image" :src="baseImgUrl + classifyList[currentItem].classifyImg"></image>
					<view>
						<view class="product-name">{{
              classifyList[currentItem].deptName
            }}</view>
						<view class="product-detail">{{
              classifyList[currentItem].deptName
            }}</view>
						<view class="more">了解更多></view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import api from "@/api/product";
	import {
		getToken
	} from "@/utils/auth";
	import {
		baseImgUrl
	} from "@/config";
	import login from "../api/login";

	export default {
		name: "Store",
		data() {
			return {
				baseImgUrl,
				heightConfig: {},
				classifyList: [],
				currentItem: 0,
			};
		},
		async onLoad() {
			this.mainHeight = this.$store.getters.heightData.noTabMainHeight;
			this.heightConfig = this.$store.getters.heightData;

			this.getGoodClassify();
		},
		async onShow() {},
		onPullDownRefresh() {
			// 重置页码
			// this.pageNum = 1;

			// 重新获取数据
			Promise.all([this.getGoodClassify()]).finally(() => {
				// 停止下拉刷新动画
				uni.stopPullDownRefresh();
			});
		},
		methods: {
			// 获取商品分类列表
			getGoodClassify() {
				api.getGoodClassify().then((res) => {
					if (res.code == 200) {
						// this.classifyList = res.rows;
						this.classifyList = res.rows.filter(
							(item) => item.deptName != "积分商品"
						);
					}
				});
			},
			clickMenu(index) {
				this.currentItem = index;
			},
			toProductList() {
				let id = this.classifyList[this.currentItem].id;
				uni.navigateTo({
					url: `/subPages/details/productList?id=${id}`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.store-page {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background-color: #fff;

		.header {
			width: 100%;
			padding: 0 28rpx;
			background-color: #fff;

			.logo {
				width: 200rpx;
				height: 60rpx;
				// background-color: #fee7eb;
				border-radius: 20px;
				text-align: center;
				line-height: 60rpx;
				margin: 0 auto;
			}
		}

		.content {
			display: flex;
			height: 90%;

			.nav-menu {
				width: 200rpx;
				min-height: 620rpx;

				.menu-item {
					width: 200rpx;
					height: 100rpx;
					box-sizing: border-box;
					line-height: 100rpx;
					text-align: center;
				}
			}

			.nav-content {
				flex: 1;
				min-height: 620rpx;

				.menu-name {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 100rpx;
					margin: 0 20rpx;

					.arrow {
						width: 34rpx;
						height: 34rpx;
					}
				}

				.content-item {
					display: flex;
					padding: 30rpx;
					margin: 0 20rpx;
					box-sizing: border-box;
					box-shadow: 0 0 40rpx rgba(0, 0, 0, 0.1);
					align-items: center;
					border-radius: 16rpx;

					.image {
						width: 200rpx;
						height: 200rpx;
						margin-right: 16rpx;
					}

					.product-name {
						font-size: 32rpx;
						margin-bottom: 16rpx;
					}

					.product-detail {
						font-size: 24rpx;
						color: #999;
						margin-bottom: 32rpx;
					}

					.more {
						width: 180rpx;
						height: 40rpx;
						line-height: 40rpx;
						background: linear-gradient(to right, #fce5d8, #feb7d5);
						border-radius: 20rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>